<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
{% load staticfiles %}
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
                {% if user.is_authenticated %}
				<div class="login_btn fl">
					欢迎您：<em>{{ user.username }}</em>
                    <span>|</span>
					<a href="{% url 'user:logout' %}">退出</a>
				</div>
                {% else %}
				<div class="login_btn fl">
					<a href="{% url 'user:login' %}">登录</a>
					<span>|</span>
					<a href="{% url 'user:register' %}">注册</a>
				</div>
                {% endif %}
				<div class="user_link fl">
					<span>|</span>
					<a href="{% url 'user:info' %}">用户中心</a>
					<span>|</span>
					<a href="{% url 'cart:show' %}">我的购物车</a>
					<span>|</span>
					<a href="{% url 'user:order' 1 %}">我的订单</a>
				</div>
			</div>
		</div>

	<div class="search_bar clearfix">
		<a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
	</div>

	<div class="total_count">全部商品<em>{{ cart_count }}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form method="post" action="{% url 'order:place' %}">
    {% for goods in goods_content %}
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="goods_id" value="{{ goods.id }}" checked></li>
		<li class="col02"><img src="{{ goods.image.url }}"></li>
		<li class="col03">{{ goods.name }}<br><em>{{ goods.price }}元/{{ goods.unite }}g</em></li>
		<li class="col04">{{ goods.unite }}g</li>
		<li class="col05">{{ goods.price }}元</li>
		<li class="col06">
			<div class="num_add" >
				<a href="javascript:;" class="add fl" id="{{ goods.id }}">+</a>
				<input type="text" class="num_show fl" id="{{ goods.id }}" value="{{ goods.count }}">
				<a href="javascript:;" class="minus fl" id="{{ goods.id }}">-</a>
			</div>
		</li>
		<li class="col07">{{ goods.amount }}元</li>
		<li class="col08" id="{{ goods.id }}"><a href="javascript:;">删除</a></li>
	</ul>
    {% endfor %}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ amount_price }}</em><br>共计<b>{{ amount_count }}</b>件商品</li>
        <li class="col04" >
        {% csrf_token %}
            <input type="submit"  name="" value="去结算"/>
        </li>
	</ul>
    </form>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
        <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
        <script type="text/javascript">
            $(function (){
                // 刷新页面
                function update_info(){
                    window.location.href = '{% url 'cart:show' %}';
                };

                // 商品选中问题
                $('.settlements').find(':checkbox').change(function () {
                    // 获取全选的checkbox的选中状态
                    is_checked = $(this).prop('checked')
                    console.log(is_checked)
                    // 遍历商品的对应的checkbox，设置这些checkbox的选中状态和全选的checkbox保持一致
                    $('.cart_list_td').find(':checkbox').each(function () {
                        $(this).prop('checked', is_checked)
                    })
                    update_page_info();
                });
                // 商品对应的checkbox状态发生改变时，设置全选checkbox的状态
                $('.cart_list_td').find(':checkbox').change(function () {
                    // 获取页面上所有商品的数目
                    all_len = $('.cart_list_td').length
                    // 获取页面上被选中的商品的数目
                    checked_len = $('.cart_list_td').find(':checked').length
                    is_checked = true
                    if (checked_len < all_len){
                        is_checked = false
                    }
                    $('.settlements').find(':checkbox').prop('checked', is_checked)
                    update_page_info();
                });

                // 计算被选中的商品的总件数和总价格
                function update_page_info() {
                    // 获取所有被选中的商品的checkbox
                    // 获取所有被选中的商品所在的ul元素
                    total_count = 0
                    total_price = 0
                    $('.cart_list_td').find(':checked').parents('ul').each(function () {
                        // 获取商品的数目和小计
                        count = $(this).find('.num_show').val()
                        amount = $(this).children('.col07').text()
                        // 累加计算商品的总件数和总价格
                        count = parseInt(count)
                        amount = parseFloat(amount)
                        total_count += count
                        total_price += amount
                    })
                    // 设置被选中的商品的总件数和总价格
                    $('.settlements').find('em').text(total_price.toFixed(2))
                    $('.settlements').find('b').text(total_count)
                }

                // 商品的删除
                $('.cart_list_td').children('.col08').click(function (){
                    var goods_id = $(this).attr('id');
                    var csrf = $('input[name=csrfmiddlewaretoken]').val();
                    params =  params = {'csrfmiddlewaretoken': csrf, 'goods_id': goods_id};
                    $.ajax({
                        'url': '{% url 'cart:delete' %}',
                        'type': 'post',
                        'data': params
                        }).done(function (data){
                            console.log(data.msg);
                            if (data.msg == 'ok') {
                                alert('删除成功');
                                }
                        }).fail(function (){
                            console.log("网络超时");
                        })
                    update_info();
                });
                function update_content(id, count){
                    var goods_id = id;
                    var csrf = $('input[name=csrfmiddlewaretoken]').val();
                    var count = count;
                    console.log(csrf+':'+count+':'+goods_id);
                    params =  params = {'csrfmiddlewaretoken': csrf, 'goods_id': goods_id, 'count': count};
                     $.ajax({
                        'url': '{% url 'cart:update' %}',
                        'type': 'post',
                        'data': params
                        }).done(function (data){
                            console.log(data.msg);
                            if (data.msg == 'ok') {
                                alert('处理成功');
                            }
                        }).fail(function (){
                            console.log("网络超时");
                        })
                    update_page_info();
                    update_info();
                }
                // 商品的增加
                $('.add').click(function (){
                    var count =  $(this).next().val();
                    count = parseInt(count)+1;
                    $(this).next().val(count);
                    var id = $(this).attr('id');
                    update_content(id, count);
                });
                // 商品的减少
                $('.minus').click(function (){
                    var count =  $(this).prev().val();
                    count = parseInt(count)-1;
                    if (count < 0){
                        count = 1;
                    }
                    $(this).prev().val(count);
                    var id = $(this).attr('id');
                    update_content(id, count);
                });
                // 手动修改
                $('.num_show').blur(function (){
                    count = $(this).prop('value');
                    if(isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
                        count = 1;
                    }
                    $(this).val(count);
                    var id = $(this).attr('id');
                    update_content(id, count);
                });
            })
        </script>
</body>
</html>